<form class="compact">
  <section class="form-block">
    <label>Options</label>
    <div class="form-group">
      <label for="numFormat">Number format:</label>
      <div class="select">
        <select id="numFormat" name="numFormat" [(ngModel)]="ser.options.numFormat" (change)="reformat()">
          <option value="T">Standard</option>
          <option value="S">Scientific</option>
          <option value="E">Engineering</option>
          <option value="L">Long Scale</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label for="t1">Alternative format:</label>
      <div class="toggle-switch">
        <input type="checkbox" name="al" id="al" [(ngModel)]="ser.options.usaFormat">
        <label for="al">On</label>
      </div>
    </div>

    <div class="form-group">
      <label for="t1">Theme:</label>
      <div class="toggle-switch">
        <input type="checkbox" name="t1" id="t1" [(ngModel)]="ser.options.dark" (change)="ser.setTheme()">
        <label for="t1">Dark</label>
      </div>
      <div class="select">
        <select id="head" name="head" [(ngModel)]="ser.options.header">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label>Line number:</label>
      <input type="number" name="t4" id="t4" [(ngModel)]="ser.options.lines">
    </div>

    <div class="form-group">
      <label for="t1">Sacrifice alert:</label>
      <div class="toggle-switch">
        <input type="checkbox" name="s" id="s" [(ngModel)]="ser.options.sacAlert">
        <label for="t1">Single</label>
      </div>
      <div class="toggle-switch">
        <input type="checkbox" name="s1" id="s1" [(ngModel)]="ser.options.sacAllAlert">
        <label for="t1">All</label>
      </div>
    </div>

    <div class="form-group">
      <label for="t1">Collapse alert:</label>
      <div class="toggle-switch">
        <input type="checkbox" name="s" id="s" [(ngModel)]="ser.options.colAlert">
        <label for="t1">Single</label>
      </div>
      <div class="toggle-switch">
        <input type="checkbox" name="s1" id="s1" [(ngModel)]="ser.options.colAllAlert">
        <label for="t1">All</label>
      </div>
    </div>

    <div class="form-group">
      <label>Main node:</label>
      <input [(colorPicker)]="ser.options.mainColor" [style.background]="ser.options.mainColor" (colorPickerChange)="nodeColorChanged = true"
      />
    </div>
    <div class="form-group">
      <label>Normal:</label>
      <input [(colorPicker)]="ser.options.normalColor" [style.background]="ser.options.normalColor" (colorPickerChange)="nodeColorChanged = true"
      />
    </div>
    <div class="form-group">
      <label>Leaf:</label>
      <input [(colorPicker)]="ser.options.leafColor" [style.background]="ser.options.leafColor" (colorPickerChange)="nodeColorChanged = true"
      />
    </div>
    <button class="btn btn-danger-outline" (click)="resetColors()">Reset Colors</button>



  </section>
</form>
